<template>
  <!--表单-->
  <div style="color: red">
    <a-row >
      <a-col :span="24" class="colCsss">
        <a-card title="服务商" :bordered=false  class="ant-advanced-search-form">
          <a-form
            :form="form"
            @submit="handleSubmit"
            class="aFform"
          >
            <a-form-item   label="服务商名称"    class="atFormItem">
              <a-input v-decorator="[ 'name', {rules: [{ required: true, message: '请输入服务商名称！',}]   }]"/>
            </a-form-item>
            <a-form-item label="服务商简称"    class="atFormItem">
              <a-input v-decorator="[ 'shortName',{ rules: [{ required: false, message: '请输入服务简称!'}] }]"/>
            </a-form-item>
            <a-form-item
              :wrapperCol="wrapperCol"
              label="服务商logo图片(690*345)"
              class="atFormItem"
              style="display: flex"
            >
              <a-upload
                :action="this.$baseURL+'/common/upload/uploadImg'"
                listType="picture-card"
                :fileList="fileList"
                @preview="uploadPreview"
                @change="uploadChange"
                :disabled="flag"
                :beforeUpload="beforeUpload"
              >
                <div v-if="fileList.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">服务商logo图片</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="uploadCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </a-form-item>
            <a-form-item label="服务商备注"  class="atFormItem">
              <a-input v-decorator="[ 'remark',{ rules: [{ required: false, message: '请输入服务商备注!'}] }]"/>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="24" class="colCsss">
        <a-card title="服务商微信微信配置" :bordered=false   class="ant-advanced-search-form">
          <a-form
            :form="form"
            @submit="handleSubmit"
            class="aFform"
          >
            <a-form-item label="微信APPID"     class="atFormItem" >
              <a-input v-decorator="[ 'wxAppId', {rules: [{ required: false, message: '请输入微信APPID！',}]   }]"/>
            </a-form-item>
            <a-form-item label="微信商户号"     class="atFormItem">
              <a-input v-decorator="[ 'wxMchId',{ rules: [{ required: false, message: '请输入微信商户号!'}] }]"/>
            </a-form-item>
            <a-form-item label="微信商户密钥"    class="atFormItem" >
              <a-input v-decorator="[ 'wxMchKey',{ rules: [{ required: false, message: '请输入微信商户密钥!'}] }]"/>
            </a-form-item>
            <a-form-item
              label="微信p12证书的位置"
              class="atFormItem"
            >
              <a-upload name="file"  :multiple="true"  :fileList="itemFileList" :action="this.$baseURL+'/common/upload/uploadCertificateFile'" @change="handleChange">
                <a-button >
                  <a-icon type="upload"/>上传证书
                </a-button>
              </a-upload>
            </a-form-item>
            <a-form-item label="微信返佣比例"     class="atFormItem">
              <a-input placeholder="请输入微信返佣比例(单位:万分比)"  v-decorator="[ 'wxRate',{ rules: [{ required: false, message: '请输入微信返佣比例!'}] }]"/>
            </a-form-item>

          </a-form>
        </a-card>
      </a-col>
      <a-col :span="24" class="colCsss">
        <a-card title="服务商支付宝配置" :bordered=false   class="ant-advanced-search-form">
          <a-form
            :form="form"
            @submit="handleSubmit"
            class="aFform"
          >
            <a-form-item label="支付宝分润PID"  class="atFormItem">
              <a-input  v-decorator="[ 'providerId', {rules: [{ required: false, message: '请输入支付宝应用ID！',}]   }]"/>
            </a-form-item>
            <a-form-item label="支付宝应用ID"  class="atFormItem">
              <a-input  v-decorator="[ 'aliAppId', {rules: [{ required: false, message: '请输入支付宝应用ID！',}]   }]"/>
            </a-form-item>
            <a-form-item label="支付宝返佣比例" class="atFormItem" >
              <a-input placeholder="请输入微信返佣比例(单位:万分比)" v-decorator="[ 'aliRate',{ rules: [{ required: false, message: '请输入微信返佣比例!'}] }]"/>
            </a-form-item>
            <a-form-item
              label="应用公钥证书(appCertPublicKey)"
              class="atFormItem"
            >
              <a-upload name="file"  :multiple="true"  :fileList="userFileList" :action="this.$baseURL+'/common/upload/uploadCertificateFile'" @change="userChange">
                <a-button >
                  <a-icon type="upload"/>上传证书
                </a-button>
              </a-upload>
            </a-form-item>
            <a-form-item
              label="支付宝公钥证书(alipayCertPublicKey)"
              class="atFormItem"
            >
              <a-upload name="file"  :multiple="true"  :fileList="alipaycateList" :action="this.$baseURL+'/common/upload/uploadCertificateFile'" @change="alipayChange">
                <a-button >
                  <a-icon type="upload"/>上传证书
                </a-button>
              </a-upload>
            </a-form-item>

            <a-form-item
              label="根证书(alipayRootCert)"
              class="atFormItem"
            >
              <a-upload name="file"  :multiple="true"  :fileList="alipayRootList" :action="this.$baseURL+'/common/upload/uploadCertificateFile'" @change="alipayRootChange">
                <a-button >
                  <a-icon type="upload"/>上传证书
                </a-button>
              </a-upload>
            </a-form-item>
<!--            -->
            <a-form-item label="支付宝公钥"   class="atFormItem"  style="width:100%">
              <a-textarea  autosize v-decorator="[ 'aliPublicKey',{ rules: [{ required: false, message: '请输入微信商户号!'}] }]"/>
            </a-form-item>
            <a-form-item label="支付宝私钥"  class="atFormItem" style="width:100%" >
              <a-textarea autosize v-decorator="[ 'aliPrivateKey',{ rules: [{ required: false, message: '请输入微信商户密钥!'}] }]"/>
            </a-form-item>

            <a-form-item>
              <a-col class="ant-pro-footer-toolbar" style="width: calc(100% - 74px);">
                <a-button @click="handleGoBack" style="float: right;margin-top:15px">返回</a-button>
                <a-button   type="primary"  html-type="submit" style="float: right;margin-top:15px;margin-right: 30px;">
                  <span>提交</span>
                </a-button>
              </a-col>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { deletePic,deleteFile,addOrUpdate,selectById} from '@/api/businessService/business'
  import pick from 'lodash.pick'
  export default {
    props: {
      record: {
        type: [Object, String],
        default: ''
      }
    },
    data () {
      return {
        autoCompleteResult: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
          lg:{span:6}
        },
        wrapperCol: {
          xs: { span: 24},
          sm: { span: 16 },
          lg:{span:6}
        },

        previewVisible: false,
        fileList:[],
        flag: false,
        previewImage:'',
        newFileList:[], //图片后台返回的数据
        certificateList:[],//证书后台返回数据
        appCerList:[],
        couponInfo:{},
        itemFileList:[],
        userFileList:[],
        alipayFileList:[],
        alipaycateList:[],// 支付宝公钥
        alipayRootList:[],//根证书
        alipayRootFileList:[]
      };
    },
    beforeCreate () {
      this.form = this.$form.createForm(this);
    },

    mounted() {
      this.loadEditInfo(this.record)
    },

    methods:{
      handleGoBack() {
        this.$emit('onGoBack')
      },
      uploadPreview (file) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      uploadChange (info) { //图片logo
        this.fileList = info.fileList
        if(info.file.status === 'done'){
          this.fileList.pop()
          this.fileList.push(info.file)
          this.$message.success(`${info.file.name} 上传成功`)
          this.newFileList = info.file.response

        }else if(info.file.status === 'error'){
          this.$message.success(`${info.file.name} 上传失败`)
        }else  if(info.file.status === 'removed'){
          deletePic(info.file.response.name).then(res => {
            if(res.code==200){
              this.$message.success(`删除成功`)
            }else {
              this.$message.success(`删除失败`)
            }
          })

        }
      },
      uploadCancel () { //图片logo
        this.previewVisible = false
      },
      beforeUpload(file) { //上传图片之前的钩子
        const isJPEG = file.type === 'image/jpeg'
        const isJPG = file.type === 'image/jpg'
        const isPNG = file.type === 'image/png'
        if (!isJPG && !isJPEG && !isPNG) {
          this.$message.error('只支持文件格式jpg,png')
        }
        return file.type
      },
      handleChange(info) { //上传证书
        this.itemFileList = info.fileList
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
          this.itemFileList.pop()
          this.itemFileList.push(info.file)
          this.$message.success(`${info.file.name} 上传成功`);
          this.certificateList = info.file.response


        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name}上传失败.`);
        }else  if(info.file.status === 'removed'){
          deleteFile(info.file.response.name).then(res => {
            // console.log('---删除文件----')
          })
        }
      },
      userChange(info) { //应用上传证书
        this.userFileList = info.fileList
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
          this.userFileList.pop()
          this.userFileList.push(info.file)
          this.$message.success(`${info.file.name} 上传成功`);
          this.appCerList = info.file.response


        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name}上传失败.`);
        }else  if(info.file.status === 'removed'){
          deleteFile(info.file.response.name).then(res => {
            // console.log('---删除文件----')
          })
        }
      },
      alipayChange(info) { //上传证书
        this.alipaycateList = info.fileList
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
          this.alipaycateList.pop()
          this.alipaycateList.push(info.file)
          this.$message.success(`${info.file.name} 上传成功`);
          this.alipayFileList = info.file.response

    } else if (info.file.status === 'error') {
      this.$message.error(`${info.file.name}上传失败.`);
    }else  if(info.file.status === 'removed'){
      deleteFile(info.file.response.name).then(res => {
        // console.log('---删除文件----')
      })
    }
  },
      alipayRootChange(info) { //上传根证书
        this.alipayRootList = info.fileList
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
          this.alipayRootList.pop()
          this.alipayRootList.push(info.file)
          this.$message.success(`${info.file.name} 上传成功`);
          this.alipayRootFileList = info.file.response
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name}上传失败.`);
        }else  if(info.file.status === 'removed'){
          deleteFile(info.file.response.name).then(res => {
            // console.log('---删除文件----')
          })
        }
      },
      close() {
        // this.$emit('close')
        this.visible = false
        this.form.resetFields()
        this.fileList = []
      },

      loadEditInfo(record) {
        if(!record){
          return
        }
        this.couponInfo = record
        let wxKeyPath =  Object.assign({}, { url: record.wxKeyPath })
        let appCertPublicKey = Object.assign({}, { url: record.appCertPublicKey })
        let alipayCertPublicKey = Object.assign({}, { url: record.alipayCertPublicKey })
        let logoUrl = Object.assign({}, { url: record.logoUrl })
        this.fileList.push({"uid":"12345",url: record.logoUrl,name:'123' })
        if(record.wxKeyPath)
        this.itemFileList.push({"uid":"-1",url:record.wxKeyPath ,name:record.wxKeyPath})
        if(record.appCertPublicKey)
        this.userFileList.push({"uid":"1",url:record.appCertPublicKey ,name:record.appCertPublicKey})
        if(record.alipayCertPublicKey)
        this.alipaycateList.push({"uid":"2",url:record.alipayCertPublicKey ,name:record.alipayCertPublicKey})
        if(record.alipayRootCert)
        this.alipayRootList.push({"uid":"3",url:record.alipayRootCert ,name:record.alipayRootCert})
        selectById(record.id).then(res => {
          // console.log('???',res)
        })
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(record, 'name', 'shortName', 'remark', 'wxAppId', 'wxMchId','wxMchKey', 'wxRate','providerId', 'aliAppId', 'aliPublicKey','aliPrivateKey','aliRate',))
        })

      },
      handleSubmit(e){
        const _this = this
        e.preventDefault();
        this.form.validateFieldsAndScroll((err,values)=>{
          if (!err) {
            _this.confirmLoading = true
            let logoUrl = this.newFileList.url
            let wxKeyPath = this.certificateList.url
            let appCertPublicKey = this.appCerList.url
            let alipayCertPublicKey = this.alipayFileList.url
            let alipayRootCert = this.alipayRootFileList.url
            values.logoUrl = logoUrl
            values.wxKeyPath = wxKeyPath
            values.appCertPublicKey = appCertPublicKey
            values.alipayCertPublicKey = alipayCertPublicKey
            values.alipayRootCert = alipayRootCert
            values.id = _this.couponInfo.id
            addOrUpdate(values).then(res=>{
              console.log('表单提交',res)
              if(res.code==200){
                this.$message.success(res.message);
                this.$emit('onGoBack')
                _this.close()
              }else {
                this.$notification.error({
                  message: '错误',
                  description: res.message,
                  duration: 4
                })
              }
            }).finally(() => {
              _this.confirmLoading = false
            })
          }
        });
      },
    },

  }
</script>

<style scoped>
  .aFform{
    margin-left: 32px;
    display: flex;
    flex-wrap: wrap
  }
  #components-form-demo-vuex .language-bash {
    max-width: 400px;
    border-radius: 6px;
    margin-top: 24px;
  }
  .atFormItem{
    margin-right:38px;
    width: 45%;

  }
  /*.ant-advanced-search-form {*/
  /*  display: flex;*/
  /*}*/
  .colCsss{
    margin-bottom: 20px;
    border: 1px solid #eee;

  }

  .ant-pro-footer-toolbar{
    position: fixed;
    bottom: 0;
    right: 0;
    height: 56px;
    line-height: 56px;
    box-shadow:0 -1px 2px rgba(0,0,0,.03);
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 0 24px;
    z-index: 9;
  }

</style>
